<template>
	<div class="personnelAdd personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-sys fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>账单列表</el-breadcrumb-item>
			<el-breadcrumb-item>账单详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">账单详情</h4>
			</div>
			<div class="mt_10 wrap_grid-content mt_20" style="min-height: 687px;">
				<el-row>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">账单编号：</div>
									<div class="fl list-cont text-primary">{{ billInfo.sn }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">账单状态：</div>
									<div class="fl list-cont text-primary">{{ billInfo.status_name }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">城市：</div>
									<div class="fl list-cont text-primary">{{ billInfo.city_name }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">账单类型：</div>
									<div class="fl list-cont text-primary" style="min-width: 150px;">
										{{ billInfo.type_name }}
									</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">人才编号：</div>
									<div class="fl list-cont text-primary">{{ billInfo.staff_sn }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">账单对象：</div>
									<div class="fl list-cont text-primary">{{ billInfo.staff_name }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">手机号：</div>
									<div class="fl list-cont text-primary">{{ billInfo.mobile }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">店铺：</div>
									<div class="fl list-cont text-primary" style="min-width: 150px;">{{ billInfo.shop_name }}</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">人才类型：</div>
									<div class="fl list-cont text-primary">{{ billInfo.staff_work_type }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">数量：</div>
									<div class="fl list-cont text-primary">{{ billInfo.count }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">合计时长：</div>
									<div class="fl list-cont text-primary">{{ billInfo.bill_total_hour }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">合计金额：</div>
									<div class="fl list-cont text-primary" style="min-width: 150px;">
										{{ billInfo.amount | filterNumber }}
									</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">账单开始日期：</div>
									<div class="fl list-cont text-primary">{{ billInfo.bill_date_start }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">账单结束日期：</div>
									<div class="fl list-cont text-primary">{{ billInfo.bill_date_end }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">计费规则：</div>
									<!-- <div class="fl list-cont text-primary" v-if="billInfo.price_type == 1">时薪</div>
									<div class="fl list-cont text-primary" v-if="billInfo.price_type == 2">按件/按体积</div> -->
									<div class="fl list-cont text-primary">{{ billInfo.salary_name }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">结算周期：</div>
									<div class="fl list-cont text-primary" style="min-width: 150px;">
										{{ billInfo.bill_period_name }}
									</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">出工天数：</div>
									<div class="fl list-cont text-primary">{{ billInfo.work_days }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">白班工时：</div>
									<div class="fl list-cont text-primary">{{ (billInfo.hour_day / 3600) | rateNext }}h</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">夜班工时：</div>
									<div class="fl list-cont text-primary">{{ (billInfo.hour_night / 3600) | rateNext }}h</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">基础工资：</div>
									<div class="fl list-cont text-primary" style="min-width: 150px;">
										{{ (billInfo.base_salary / 100) | rateNext }}元
									</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">岗位工资：</div>
									<div class="fl list-cont text-primary">{{ (billInfo.job_salary / 100) | rateNext }}元</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">全勤奖：</div>
									<div class="fl list-cont text-primary">{{ (billInfo.attendance_salary / 100) | rateNext }}元</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">推荐奖：</div>
									<div class="fl list-cont text-primary">{{ (billInfo.recommend_salary / 100) | rateNext }}元</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">其他费用：</div>
									<div class="fl list-cont text-primary" style="min-width: 150px;">
										{{ (billInfo.other_salary / 100) | rateNext }}元
									</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">扣款：</div>
									<div class="fl list-cont text-primary">{{ (billInfo.deduct_salary / 100) | rateNext }}元</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">付款申请编号：</div>
									<div class="fl list-cont text-primary">{{ billInfo.payment_order_sn }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">提现记录编号：</div>
									<div class="fl list-cont text-primary">{{ billInfo.withdraw_cash_sn }}</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">账单备注：</div>
									<div class="fl list-cont text-primary">{{ billInfo.remark }}</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<div class="contentInfo">
					<div class="row-info clear" v-for="(item, index) in billInfo.log" :key="index">
						<div class="fl list-cont">{{ item.user_name }}</div>
						<div class="fl list-cont">{{ item.add_time }}</div>
						<div class="fl list-cont">{{ item.title }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { getBillInfo } from '@/api/bill.js'

export default {
	name: 'Main',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			active: 0, //进度条位置
			url: common.url,
			rl_id: '', //需求id
			rl_sn: '', //需求sn
			task_id: '', //任务id
			rl_info: {}, //账单详情
			task_info: {}, //任务详情
			tableData: [],
			billInfo: {}
		}
	},
	async created() {
		if (this.$route.query.sn) {
			// this.row = JSON.parse(this.$route.query.row)
			// this.s_sn = this.$route.query.sn //接收传参
			// 调用详情接口
			try {
				let ret = await getBillInfo({
					sn: this.$route.query.sn
				})

				this.billInfo = ret
				console.log(ret)
			} catch (err) {
				console.log(err)
			}
		}
	},
	mounted() {},
	methods: {
		back() {
			//返回
			this.$router.go(-1)
		}
	},
	filters: {
		ReversalTime: function (value) {
			value = value % 24
			return common.getReversalTime(value)
		}
	}
}
</script>

<style scoped>
.wrap_grid-content {
	border: 1px solid #ebebeb;
}
.grid-content {
	padding: 10px 15px 0px;
}
.bg-purple-light {
	min-height: 687px;
	border-right: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
}
.row-info .title-key {
	width: 95px;
}
.area {
	background: #f7f7f7;
	border-radius: 8px;
	padding: 0 10px;
	width: 300px;
	min-height: 200px;
}
.row-info .list-cont {
	margin-left: 10px;
}

.steps {
	color: #888888;
}

.list_info {
	display: flex;
	flex-wrap: wrap;
}
.row-info .title-key {
	text-align: left;
}
</style>



// WEBPACK FOOTER //
// src/components/bill/BillCont.vue